import React, { PureComponent } from 'react';
import { Modal, Button, message } from 'antd';
import styles from '@/common/PateoTable/TableList.less';

export default class IndexModal extends PureComponent {
  state = {
    buttonLoading: false,
    checkedIndex: undefined,//选定的当前列序列
  };

  componentDidMount() {
  }
 
  setLoading = (flag) => {
    this.setState({
      buttonLoading: flag,
    });
  }
  close = () => {
    const { closeModal} = this.props;
    this.setState({
      buttonLoading: false,
      optionVisible: false,
      numVibible: false,
      checkedIndex: undefined,
    });
    closeModal();
  }
  ok = () => {
    this.props.getIndexChecked(this.state.checkedIndex);//将选取到的值传递给父组件
    this.setLoading(false);
    this.close();
  };
  // 点击键盘中列表
  clickButton = (item) => {
    this.setState({
      checkedIndex: item,
    });
  }

  renderSimpleForm() {
    const { modalVisible,checkedNum} = this.props;
    const { buttonLoading, } = this.state;
    const footer = (
      <div>
        <Button onClick={this.close}>取消</Button>
        <Button loading={buttonLoading} onClick={this.ok} type="primary">保存</Button>
      </div>
    );
    const numArr = Array.from({length:300},(_, i)=>1+(i));
    const tables = numArr.map((item, index) => {
        if(item%10 == 0){
          return (
            <div style={{display: 'inline'}} key={index}>
            <Button key={index} onClick={()=>this.clickButton(item)} style={{width: '50px'}} disabled={checkedNum?.includes(item)}>
             {item}
            </Button>
           <br/>
           </div>
          )
        }else{
          return (
            <Button key={index} onClick={()=>this.clickButton(item)} style={{width: '50px'}} disabled={checkedNum?.includes(item)}>
             {item}
            </Button>
          )
        }
    })
    const style = {
      height: 350,
      overflowY: 'scroll',
    };
    return (
      <Modal
        footer={footer}
        okText="保存"
        title={"请选择字段顺序"}
        visible={modalVisible}
        onCancel={this.close}
        width="570px"
      >
      <div style={{ ...style}}>
        {tables}
      </div>
      </Modal>
    );
  }

  renderForm() {
    return this.renderSimpleForm();
  }
  render() {
    return (
      <div className={styles.tableListForm}>
        {this.renderForm()}
      </div>
    );
  }
}
